<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-demo="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>自定义指令-元素指令</title>
</head>
<body>

    <div id="example-5">
        <my-directive></my-directive>
    </div>
    <script src="../lib/vue.js"></script>
<script>
    /*
    * 元素指令：与angular的“E”指令非常相似。
    * 在html中书写方式<my-directive></my-directive>
    * 元素指令不能接收参数或表达式，但是它可以读取元素的特性从而决定它的行为
    * 迥异于普通指令，元素指令是终结性的，这意味着，一旦Vue遇到一个元素指令，他将跳过该元素及其子元素--
    * 只有该元素指令本身可以操作该元素及其子元素
    * */
    Vue.elementDirective('myDirective', {
        //同普通指令一样拥有钩子函数
        bind : function(){
            console.log(this.el)
        },
        update : function () {
            console.log(this)
        },
        unbind : function () {
            
        }
    })

    var exampleVm = new Vue({
        el : '#example-5'
    })

</script>
</body>
</html>